<template>
	<div>
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label>你想做什么菜：</label>
				<input type="text" v-model='cookName' class="mui-input-clear" placeholder="请输入内容">
			</div>
			<div class="mui-button-row">
				<button type="button" class="mui-btn mui-btn-success" @click="searchCook">搜搜看</button>
			</div>
		</form>
		<ul class="mui-table-view" v-if="cookList.length">
			<li class="mui-table-view-cell" v-for="cookItem in cookList" @click="cook(cookItem.title)">
				<a class="mui-navigate-right">
					{{cookItem.title}}
				</a>
			</li>
		</ul>
		<div v-else class="mui-title">搜搜你喜欢吃的菜吧！</div>
	</div>
</template>

<script>
	import {
		getCookMap
	} from '@/http/api.js';
	export default {
		data() {
			return {
				cookName: '',
				cookList: []
			}
		},
		methods: {
			searchCook() {
				if(this.cookname==''){
					return mui.toast('菜名不能为空哦');
				}else{
					getCookMap({
						'menu': this.cookName,
					}).then(res => {
						mui.toast('正在加载中...');
						this.cookList = res.result.data;
					})
				}
				
			},
			cook(cookname) {
				this.$router.push({path:'cook',query:{cookname:cookname}})

			},
		}
	}
</script>

<style>
</style>
